<template>
	<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+data.id+'&jobType='+data.jobType)"
		class="list-item">
		<view class="list-info">
			<view class="title-info">
				<view class="title">{{data.jobTitle}}</view>
				<view class="fast-job" v-if="data.worry">急招</view>
				<view v-if="data.isHeat">
					<image style="width: 21px;height: 25px;padding-top: 10rpx;"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/heat.png">
					</image>
				</view>
			</view>
			<view class="detail-item">
				<view class="money-item">
					<view class="wage" v-if="data.minSalary">{{data.minSalary}}-{{data.maxSalary}}元
					</view>
					<view class="wage" v-else>面议</view>
				</view>
				<view class="detail-info">
					<view class="name">{{data.comRecruiters.comPosition}}</view>
					<image mode="aspectFill" :src="data.comRecruiters.user.faceUrl" class="photo">
					</image>
				</view>
			</view>
			<view class="address-item">
				<view class="address iconfont icon-dizhi">{{data.jobAddress}}</view>
				<view class="distance">距离:{{data.distances}}km</view>
			</view>
			<view class="label-block">
				<view class="label-item" v-for="label in data.label">{{label}}</view>
			</view>
			<view class="com-item">
				<image mode="aspectFill" :src="data.comRecruiters.enterprise.logoUrl" class="photo">
				</image>
				<view class="distance">{{data.comRecruiters.enterprise.enterpriseName}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "PositionItem",
		props: {
			data: Object
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10px 0 #efefef;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 20rpx;

		.detail-info {
			width: 260rpx;
			//height: 200rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.name {
				width: 110rpx;
				font-size: 24rpx;
				color: #999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				text-indent: 15rpx;
			}

			.photo {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				background: #efefef;
			}

			.apply-btn {
				border: 1px solid #FE7526;
				border-radius: 8rpx;
				color: #FE7526;
				font-size: 24rpx;
				padding: 8rpx 28rpx;
				position: relative;
				left: 30rpx;
			}
		}

		.list-info {
			// width: calc(100% - 180rpx);
			width: 100%;
			display: flex;
			flex-direction: column;

			>view {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.title-info {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					color: #000;
					font-weight: bold;
					font-size: 34rpx;
				}

				.fast-job {
					width: 60rpx;
					height: 38rpx;
					border: 1rpx solid #FF0014;
					font-size: 24rpx;
					text-align: center;
					color: #FF0014;
					margin-left: 20rpx;
					border-radius: 6rpx;
				}
			}

			.detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money-item {
					margin-top: 20rpx;

					.wage {
						color: #FF0014;
						font-size: 36rpx;
						font-weight: bold;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}

				.detail-info {
					width: 180rpx;
					// height: 200rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.name {
						width: 110rpx;
						font-size: 24rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						text-indent: 15rpx;
					}

					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						background: #efefef;
					}

					.apply-btn {
						border: 1px solid #FE7526;
						border-radius: 8rpx;
						color: #FE7526;
						font-size: 24rpx;
						padding: 8rpx 28rpx;
						position: relative;
						left: 30rpx;
					}
				}
			}

			.address-item {
				display: flex;
				justify-content: space-between;

				.address {
					width: 440rpx;
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.distance {
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
			.com-item {
				border-top: 1px solid #f3ebeb;
				    display: flex;
				    padding-top: 20rpx;
			.photo {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				background: #efefef;
			}

				.distance {
					color: #FE7526;
					font-size: 30rpx;
					margin: 8rpx 0rpx 0rpx 20rpx;
				}
			}
			.label-block {
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: left;
				margin-top: 20rpx;

				.label-item {
					padding: 8rpx 20rpx;
					background: #F5F6F8;
					color: #999;
					margin: 0 10rpx 20rpx 0;
				}
			}

			.wage {
				color: #FF0014;
				font-size: 36rpx;
				font-weight: bold;

				.unit {
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}
	}
</style>